<template>
  <div class="footer-essay">
    <!--文章管理-->
    <div class="AboutUs">
      <el-menu class="essay-menu" default-active="45" @select="getIndex">
        <el-menu-item class="essay-menu-item" index="45" @click="showData(45)">关于我们</el-menu-item>
        <el-menu-item class="essay-menu-item" index="46" @click="showData(46)">帮助中心</el-menu-item>
      </el-menu>
      <div class="footer-essay-content">
        <div class="box MT">
          <div class="Practitop">
            <el-input v-model="search" size="small" class="search" placeholder="请输入名称"></el-input>
            <el-button size="small" class="Prabtn" @click="searchData" type="primary">查询</el-button>
            <el-button size="small" class="Prabtn" @click="search = ''" type="primary">重置</el-button>
          </div>
          <!-- <div class="icon_font">
            <div class="el-icon-circle-plus-outline" @click="doAdd"></div>
            <div class="el-icon-delete" @click="doDelete"></div>
          </div>-->
        </div>

        <div v-if="activeIndex ==45">
          <div class="link">
            <div class="tableBox">
              <div class="table">
                <el-table
                  @selection-change="selectRow1"
                  :header-cell-style="mystyle"
                  :data="aboutTable"
                  style="width: 100%">
                  <el-table-column type="selection"  align="center"></el-table-column>
                  <el-table-column label="编号" type="index" align="center" min-width="180" >
                  </el-table-column>
                  <el-table-column label="文章标题" min-width="180px" align="center">
                    <template slot-scope="scope">
                      <div>{{scope.row.title}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="url" label="所属栏目名称" align="center" >
                    <template slot-scope="scope">
                      <div class="lurl">{{scope.row.name}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="title" align="center" label="排序" >
                    <template slot-scope="scope">
                      <div>{{scope.row.num}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作" >
                    <template slot-scope="scope">
                      <div style=" color: #3377ff;" @click="doSave(scope.row)">修改文章内容</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>

        <div v-if="activeIndex == 46">
          <div class="link">
            <div class="tableBox">
              <div class="table">
                <el-table
                  :header-cell-style="mystyle"
                  @selection-change="selectRow2"
                  :data="helpTable"
                  style="width: 100%">
                  <el-table-column type="selection" ></el-table-column>
                  <el-table-column label="编号" align="center" type="index"  min-width="80" ></el-table-column>
                  <el-table-column label="文章标题" align="center"  min-width="180px">
                    <template slot-scope="scope">
                      <div>{{scope.row.title}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="url" label="所属栏目名称" align="center" >
                    <template slot-scope="scope">
                      <div class="lurl">{{scope.row.name}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="title" align="center" label="排序">
                    <template slot-scope="scope">
                      <div>{{scope.row.num}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作" >
                    <template slot-scope="scope">
                      <div  style=" color: #3377ff;" @click="doSave(scope.row)">修改文章内容</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 45,
      aboutTable: [],
      helpTable: [],
      search: '',
      deleteRow1: [],
      deleteRow2: []
    }
  },
  methods: {
    mystyle({row, column, rowIndex, columnIndex}){
        //rgb(31, 46, 77)
        if(rowIndex === 0 && columnIndex === 1){
          return "background:rgba(247,249,252,.5);color:rgb(31, 46, 77);display: inline-block;width:50px;";
        }else{
          return "background:rgba(247,249,252,.5);color:#1F2E4D"
        }
    },
    getIndex(index) {
      this.activeIndex = index
    },
    doAdd() {
      this.$router.push({
        path: '/Footer/essayDetails',
        query: { index: this.activeIndex }
      })
    },
    doDelete() {
      let detele = []
      if (this.activeIndex == 45) {
        this.deleteRow1.forEach(item => {
          detele.push(item.id.toString())
        })
      } else {
        this.deleteRow2.forEach(item => {
          detele.push(item.id.toString())
        })
      }
      console.log(detele)
      this.lAxios({
        method: 'post',
        url: '/platform/deleteStaticData.do',
        params: {
          ids: detele.join()
        }
      }).then(res => {
        if (res.data.status == 0) {
          this.searchData()
          this.$message.success('操作成功!')
        } else {
          this.$message.error('操作失败!')
        }
      })
    },
    searchData() {
      this.aboutTable.length = 0
      this.helpTable.length = 0
      this.lAxios({
        method: 'post',
        url: '/platform/selectStaticData.do',
        params: {
          state: this.activeIndex,
          content: this.search
        }
      }).then(res => {
        if (res.data.status == 0) {
          let data = res.data.data[this.activeIndex]
          console.log(data)
          data.forEach(d => {
            let jsonObj = JSON.parse(d.content)
            if (this.activeIndex == 45)
              this.aboutTable.push({
                title: jsonObj.title,
                num: d.num,
                id: d.id,
                name: '关于我们',
                companyEditor: jsonObj.companyEditor,
                to: jsonObj.to
              })
            else
              this.helpTable.push({
                title: jsonObj.title,
                num: d.num,
                id: d.id,
                name: '帮助中心',
                companyEditor: jsonObj.companyEditor,
                to: jsonObj.to
              })
          })
        } else {
        }
      })
    },
    showData(state) {
      this.searchData()
    },
    selectRow2(row) {
      this.deleteRow2 = row
    },
    selectRow1(row) {
      this.deleteRow1 = row
    },
    doSave(row) {
      this.$router.push({
        path: '/Footer/essayDetails',
        query: { row: row, index: this.activeIndex }
      })
    }
  },
  created() {
    this.showData(45)
  },
  components: {}
}
</script>

<style  lang="scss" scoped>
.footer-essay {
  padding: 60px 0;
  .AboutUs {
    display: flex;
    justify-content: space-between;
    .footer-essay-content {
      padding: 0 30px;
      width: 100%;
    }
  }
  .essay-menu {
    width: 203px;
    border-right: none;
    .essay-menu-item {
      text-align: right;
      /*border-right: 3px solid #e6e6e6;*/
    }
    .el-menu-item.is-active {
      /*border-right: 3px solid #409eff;*/
    }
  }
}

.active {
  background-color: #3377ff;
  color: white;
}

.AboutUs .about-us {
  display: flex;
  justify-content: center;
}

.textarea {
  width: 241px;
  height: 155px;
  margin-left: 10px;
}

.box {
  display: flex;
  flex-direction: row;
}

.fontT {
  width: 280px;
  height: 33px;
  line-height: 33px;
  font-size: 10px;
  text-align: center;
  background-color: #fcf8e3;
  border-radius: 5px;
  margin-left: 203px;
  margin-top: -2px;
}

.title_bg {
  margin-top: 8px;
}

.upload {
  margin-left: 39px;
}

.box_b {
  margin-top: 10px;
}

.btn {
  width: 242px;
  margin-left: 72px;
  margin-top: 20px;
}

.ML {
  margin-left: 62px;
}

.Customer {
  width: 239px;
  height: 64px;
  margin-left: 5px;
}

.marginB {
  margin-bottom: 0px;
}

.marginT {
  margin-top: 17px;
}

.marginL {
  margin-left: 20px;
}

.save {
  margin-left: 15px;
}

.search {
  width: 239px;
}

.Prabtn {
  width: 49px;
  height: 32px;
  background-color: #3377ff;
  margin-right: 25px;
}

.MT {
  margin-top: 47px;
}

.icon_font {
  font-size: 22px;
  margin-left: 20px;
}

.icon_font > div:nth-child(1) {
  margin-right: 30px;
}

.tableBox {
  width: 98%;
  margin-right: 1%;
}

.table {
  width: 100%;
  /*box-sizing: border-box;*/
  border: 1px solid #f7f7f7;
  margin-top: 47px;
  padding-bottom: 30px;
}

.tableBtn {
  width: 140px;
  height: 39px;
  font-size: 14px;
  color: #3377ff;
}

.linp {
  width: 25px;
  height: 25px;
  text-align: center;
}

.linpName {
  width: 140px;
  height: 25px;
}

.lurl {
  color: #3377ff;
}

/*--------------------版权备案----------------------*/
.recordUp {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: 62px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 158px;
  height: 158px;
  line-height: 158px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.lbtnB {
  width: 242px;
  margin-left: 79px;
  margin-top: 30px;
}

.marginT1 {
  margin-left: 30px;
}

.marginT2 {
  margin-bottom: 0;
}
</style>
